
<script lang="ts" setup>
    import AmapComponent from "../components/GaoDeMap/GaodeMap.vue"
    import EntityExtract from "../api/currentdemo/EntityExtract";
    import HistoryTalkInfo from '../components/HistoryTalkInfo.vue';
    import type {  ReactionList } from "../api/auth/types";
    import historyTalk from '../api/historyTalk';
    import { TOKEN_KEY} from "@/enums/CacheEnum";

	const emits = defineEmits(["update:screenPopup"]);
    const Token = <string>localStorage.getItem(TOKEN_KEY);
    const props = defineProps({
        screenPopup: {
            type: Boolean,
            required: true,
        },
        fromScreenPopup: {
			type: Object,
			default: true,
		},
        SessinoCode: {
			type: String,
			default: true,
		},
    });
    //案件表单对象
    const form = ref({
        phone:'',
        contact_name:'',
        address:'',
        bus_type:'',
        cat1:'',
        cat2:'',
        description:'',
        contact_water:''
    })
    // 用户画像
    const  portrait =ref('')
    // 用户与AI的对话
    const center = ref('')
    // 默认地图的经纬度
    const mapPoint = ref([0,0])
    //地图是否显示
    const showMap = ref(true);
    const showmodal = ref(false);
    // tab切换 默认显示摘要
    const activeName = ref('first');
    // 业务类型数组
    const businessList = [
        {
            value: '1',
            label: '咨询',
        },
        {
            value: '2',
            label: '报修',
        },
        {
            value: '3',
            label: '投诉',
        },
    ];
    //反应类别数组
     const categoryList = ref<ReactionList[]>([])
    //反应内容数组
    const contentList = ref<ReactionList[]>([])
    // 模拟的用户情感
    const list = ref([
        // {emotion:'愤怒',number:'2'},
        // {emotion:'辱骂',number:'23'},
        // {emotion:'不耐烦',number:'1'},
        // {emotion:'稍有不满',number:'1'},
        // {emotion:'一般',number:'1'},
        // {emotion:'高兴',number:'1'},
    ])
    // 
    const handleClick = () => {
    // console.log(tab, event)
    }
    // 关闭来电弹窗函数
    function closeModal(){
        emits("update:screenPopup", false);
    }
    // 确定保存案件函数
    function dademodal(){
        ElMessage.success('保存成功')
        emits("update:screenPopup", false);
    }
    // 渲染表情
    function getEmoteSrc (emotion:any){
        switch (emotion) {
            case '愤怒':
                return '/images/img/emotion/emotion_anger_32.png';
            case '稍有不满':
                return '/images/img/emotion/emotion_dissatisfy_32.png';
            case '辱骂':
                return '/images/img/emotion/emotion_abuse_32.png';
            case '高兴':
                return '/images/img/emotion/emotion_smile_32.png';
            case '不耐烦':
                return '/images/img/emotion/emotion_impatient_32.png';
            case '一般':
                return '/images/img/emotion/emotion_normal_32.png';
            default:
                return '';
        }
    }
    //切换业务类型的函数
    function handleOption1Change(value:any){
        if (value==2) {
            categoryList.value = [  
                { value: '2-1', label: '水管设备' },  
                { value: '2-2', label: '用水问题' },
                { value: '2-3', label: '水质问题' }  
            ];
        }else{
            categoryList.value = []
            contentList.value = []
            form.value.cat1 = '请选择';
            form.value.cat2 = '请选择';
        }
    }
    //切换反应类别的函数
    function handCategory(value:any){
        if (value=='2-1') {
            contentList.value = [
                { value: '3-1-1', label: '水表冻坏' },  
                { value: '3-1-2', label: '水管漏水' },
                { value: '3-1-3', label: '水表漏水' },
                { value: '3-1-4', label: '阀门坏' },
                { value: '3-1-5', label: '阀门漏水' }, 
                { value: '3-1-6', label: '阀门关不上'}, 
                { value: '3-1-7', label: '其他' } 
            ]
        }else if(value=='2-2'){
            contentList.value = [
                { value: '3-2-1', label: '无水' },  
                { value: '3-2-2', label: '多户无水' },
                { value: '3-2-3', label: '水压不稳' },
                { value: '3-2-4', label: '水管异响' },
                { value: '3-2-5', label: '其他' }, 
            ]
        }else if(value=='2-3'){
            contentList.value = [
                { value: '3-3-1', label: '水黄' },  
                { value: '3-3-2', label: '水白' },
                { value: '3-3-3', label: '水中有异物' },
                { value: '3-3-4', label: '水有异味' },
                { value: '3-3-5', label: '其他' }, 
            ]
        }
    }
    watch(()=>props.screenPopup,(newValue:any)=>{
        if (newValue) {
            activeName.value = 'first' 
        }
        showmodal.value =newValue
    },{immediate:true,deep:true})
    watch(()=>props.fromScreenPopup,(newValue:any)=>{
        form.value=Object.assign(form.value,newValue)
        if (newValue.bus_type!='') {
            businessList.forEach((item,index)=>{
                if (newValue.bus_type==item.label) {
                    form.value.bus_type =item.value
                }
            })
            handleOption1Change(form.value.bus_type)
        }
        if (newValue.cat1!=''){
            var catetory = true;
            categoryList.value.forEach((item,index)=>{
                if (newValue.cat1==item.label) {
                    form.value.cat1 = item.value
                    catetory = false;
                }
            })
            if (catetory) {
                form.value.cat1 = '请选择';
            }
            handCategory(form.value.cat1)
            if (newValue.cat2!='') {
                var content  = true;
                if (contentList.value.length>0) {
                    contentList.value.forEach((item,index)=>{
                        if (newValue.cat2==item.label) {
                            form.value.cat2 = item.value
                            content = false
                        }
                    })
                }else{
                    form.value.cat2 = '请选择'
                }
                if (content) {
                    form.value.cat2 = '请选择';
                }
            }
        }
        if (newValue.address!='') {
            EntityExtract.getAmpLocation(Token,newValue.address).then(res => {
                if (res.data && res.data.lat !== '' && res.data.lng !== '') {
                    showMap.value = false;
                    mapPoint.value = [res.data.lat, res.data.lng];
                } else {
                    showMap.value = true;
                }
            })
        }else{
            showMap.value = true;
        }
    },{immediate:true,deep:true})
</script>

<template>
    <div class="center">
      <el-dialog v-model="props.screenPopup"  @close="closeModal" title="来电弹屏"  draggable >
            <section class="w-full h-full flex">
                <!-- 表单 -->
                <div class="from">
                    <el-form :model="form" class="demo-form-inline" >
                        <div class="flex">
                            <el-form-item label="联系电话" required >
                                <el-input v-model="form.phone"   maxlength="11" @input="form.phone = form.phone.replace(/^(0+)|[^\d]+/g,'')"  />
                            </el-form-item>
                            <el-form-item label="反映人" required>
                                <el-input v-model="form.contact_name" />
                            </el-form-item>
                        </div>
                        <div class="flex">
                            <el-form-item label="用水户号">
                                <el-input v-model="form.contact_water" />
                            </el-form-item>
                            <el-form-item label="表身号">
                                <el-input v-model="form.contact_water" />
                            </el-form-item>
                        </div>
                        <el-form-item label="详细地址" required class="form-item"> 
                            <el-input v-model="form.address" />
                        </el-form-item>
                        <div class="flex">
                            <el-form-item label="业务类型" required > 
                                <el-select
                                v-model="form.bus_type" 
                                size="large"
                                @change="handleOption1Change"
                                >
                                <el-option
                                        v-for="item in businessList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item label=""> 
                                <!-- <el-input v-model="form.address" /> -->
                            </el-form-item>
                        </div>
                        <div class="flex">
                            <el-form-item label="反应类别" required > 
                                <el-select
                                    v-model="form.cat1" 
                                    size="large"
                                        @change="handCategory"
                                    >
                                    <el-option
                                            v-for="item in categoryList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                            </el-form-item>
                            <el-form-item label="反应内容" required > 
                                <el-select
                                    v-model="form.cat2" 
                                    size="large"
                                    >
                                    <el-option
                                            v-for="item in contentList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                </el-select>
                            </el-form-item>
                        </div>
                        <el-form-item label="备注" >
                            <el-input type="textarea"   v-model="form.description" />
                        </el-form-item>
                    </el-form>
                    <div class="entity-bottom  w-full flex" id="MyMap" >
                        <div class="empty h-full"></div>
                        <div class="map-box w-full h-full" v-show="!showMap">
                            <AmapComponent :center="mapPoint" :zoom="16" />
                        </div>
                    </div>
                </div>
                <!-- 右边 对话记录-->
                <div class="from from-right">
                    <el-tabs
                        v-model="activeName"
                        type="card"
                        class="demo-tabs"
                        @tab-click="handleClick"
                    >
                        <el-tab-pane label="摘要" name="first">
                            <div class="pt-3.5 center-list max-h-130">
                                <div class="head-title relative">
                                    <span class="absolute title-text p-1.5 rounded font-semibold">用户与AI的对话总结</span>
                                </div>
                                <div class="py-6" :class="{'center-box':center==''}" style="white-space: pre-line;">
                                    {{center}}
                                </div>
                                <div class="head-title relative">
                                    <span class="absolute title-text p-1.5 rounded font-semibold">用户情感</span>
                                </div>
                                <div class="py-6 flex items-center" :class="{'express-box':list.length==0}">
                                    <div v-for="item in list" 
                                        class="flex items-center mx-2"
                                        :class="[
                                            {anger_active:item.emotion=='愤怒'||item.emotion=='辱骂'},
                                            {unhappy_active:item.emotion=='稍有不满'||item.emotion=='不耐烦'},
                                            {happy_active:item.emotion=='一般'||item.emotion=='高兴'},
                                        ]"
                                      
                                        >
                                        <img class="w-6 h-6" v-if="item.emotion" :src="getEmoteSrc(item.emotion)" alt="">
                                        <span class="mx-1">{{item.emotion}}:</span>
                                        <span>{{item.number}};</span>
                                    </div>
                                </div>
                                <div class="head-title relative">
                                    <span class="absolute title-text p-1.5 rounded font-semibold">用户画像</span>
                                </div>
                                <div class="pt-6" :class="{'center-box':portrait==''}"  style="white-space: pre-line;">
                                    {{ portrait }}
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="对话纪录" name="second">
                            <section class="max-h-130">
                                <HistoryTalkInfo :session_code="props.SessinoCode" :session_show="false" :showmodal="showmodal" />
                            </section>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </section>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="closeModal">取消</el-button>
                <el-button type="primary" @click="dademodal">
                    保存案件
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
.center /deep/ .el-dialog{
    padding-right: 0;
    width: 70%;
}
.center /deep/ .el-form-item__label{
    width: 78px;
}
.center /deep/ .el-form-item{
    flex: 1;
}
.center /deep/ .el-dialog__footer{
    padding-right: 16px;
}
.center /deep/ .el-tabs__item{
    border: none;
}
.form-item-type{
    flex: 0 0 auto !important;
}
.form-item{
    justify-content: center;
}
.from{
    flex: 1;
    padding: 0 15px 0 30px;
}
.center-box{
    height: 40%;
}
.entity-bottom {
    height: 255px;
}
.express-box{
    height: 20%;
}
.map-box{
    border: 1px solid var(--v-ai-rate-border-color);
}
.from-right{
    background-color: var(--v-modal-from);
    /* border: 1px solid #e6e6e6; */
    border: 1px solid var(--v-ai-rate-border-color);
}
.center /deep/ .el-tabs__header{
    margin-top: 15px;
    border: none;
}
.center /deep/ .is-active{
    background-color: #409eff;
    color: #fff;
    border-bottom-color:#e4e7ed !important;
}
.center /deep/ .el-tabs__nav{
    float: right;
    border-bottom: 1px solid var(--v-modal-border-color);
}
.center /deep/ .el-tabs{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.center /deep/ .el-tabs__content{
    flex: 1;
}
.center /deep/ .el-tab-pane{
    /* padding-top: 10px; */
    height: 100%;
}
.center /deep/ .modal__header-content>div{
    color: var(	--v-session-hist);
}
.empty{
    width: 90px;
}
.center-list {
    width: 100%;
    height: 100%;
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: scroll;
    scrollbar-width: none;
}


.head-title{
    border-bottom:1px solid #e6e6e6;
}
.title-text{
    background-color: #fff;
    top: -18px;
    left: 30px;
    color: #909399;
}
.anger_active{
    color: #F56C6C;
}
.unhappy_active{
    color: #E6A23C;
}
.happy_active{
    color: #67C23A;
}
</style>



